<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div>
    <p class="c1">欢迎：
      <a id="d1" href="http://www.baidu.com">跳转到百度！！！</a>
    </p>
  </div>
  <div></div>

  <script !src="">
    /*按id查找*/
    var d1 = document.getElementById('d1');
    /*innerText 只表示标签中的文本内容，不包含标签内容*/
    /*innerHTML 表示标签内容和文本内容*/
    // alert(d1.innerText)
    // alert(d1.innerHTML)

    /*修改内容*/
    d1.innerHTML = "<span>这是修改后的内容！！！！！</span>"
    // 修改属性，即直接用对象调用属性即可！
    d1.href = "http://www.taobao.com"


    console.log(d1)

    /*按class查找*/
    var c1 = document.getElementsByClassName('c1')
    console.log(c1)
    // alert(c1[0].innerHTML)
    // alert(c1[0].innerText)

    /*修改元素得样式*/
    c1[0].style.color = 'yellow'
    c1[0].style.backgroundColor = 'blue'



    /*按标签名查找*/
    var div = document.getElementsByTagName("div");
    console.log(div)


  </script>

</body>
</html>